<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";
import ZoomSkeleton from "@/views/detail/components/zoom/zoomSkeleton.vue";

interface Props {
   images?: string[];
}

const props=defineProps<Props>();

const detailStore = useDetailStore();

const currentIndex = ref<number>(0);

const show = ref<boolean>(false);

let time=ref<number|null>(null)

/*鼠标经过*/
const handleEnter = () => {
   show.value = true;
   clearInterval(time.value as number)
};

const handleEnterSmall = () => {
   clearInterval(time.value as number)
}

/*鼠标离开*/
const handleLeave = () => {
   show.value = false;
   handleAutoPlay()
};

const handleLeaveSmall = () => {
   handleAutoPlay()
}

/*大图*/
const larageRef = ref();

/*遮罩层*/
const layerRef = ref();

/*鼠标移动的回调函数*/
const handleMove = (event: any) => {
   let left = event.offsetX - layerRef.value.offsetWidth / 2;
   let top = event.offsetY - layerRef.value.offsetHeight / 2;
   // 约束范围
   if (left <= 0) left = 0;
   if (top <= 0) top = 0;
   if (top >= layerRef.value.offsetWidth) top = layerRef.value.offsetWidth;
   if (left >= layerRef.value.offsetHeight) left = layerRef.value.offsetHeight;
   layerRef.value.style.left = left + "px";
   layerRef.value.style.top = top + "px";
   larageRef.value.style.backgroundPositionX = -left * 2 + "px";
   larageRef.value.style.backgroundPositionY = -top * 2 + "px";
};

/*自动轮播的回调函数*/
const handleAutoPlay=()=>{
   clearInterval(time.value as number)
   time.value=setInterval(()=>{
      currentIndex.value++
      if (currentIndex.value>props.images!.length-1){
         currentIndex.value=0
      }
   },3000)
}

onMounted(()=>{
   handleAutoPlay()
})

onBeforeUnmount(() => {
   detailStore.goodDetail.mainPictures = [];
});

</script>

<template>
   <div class="zoom">
      <el-skeleton animated :count="1" :loading="!images?.length">
         <template #template>
            <zoom-skeleton></zoom-skeleton>
         </template>
         <template #default>
            <!--大图区域-->
            <transition name="fade" mode="out-in">
               <div class="large" ref="larageRef" :style="[{backgroundImage:`url(${images[currentIndex]})`}]" v-show="show"></div>
            </transition>
            <!--中图区域-->
            <div class="middle" @mouseenter="handleEnter" @mouseleave="handleLeave">
               <!--中图图片-->
               <img :src="images[currentIndex]" alt="">
               <!--遮罩层-->
               <transition name="fade" mode="out-in">
                  <div class="layer" ref="layerRef" v-show="show"></div>
               </transition>
               <!--绑定事件的元素-->
               <div class="event" @mousemove="handleMove"></div>
            </div>
            <!--小图区域-->
            <ul class="small" @mouseenter="handleEnterSmall" @mouseleave="handleLeaveSmall">
               <li v-for="(img,index) in images" :key="img" :class="{active:index===currentIndex}">
                  <img @mouseenter="currentIndex=index" :src="img" alt="">
               </li>
            </ul>
         </template>
      </el-skeleton>

   </div>
</template>

<style scoped lang="less">
.zoom {
   width: 480px;
   height: 400px;
   position: relative;
   display: flex;
   z-index: 500;

   .large {
      position: absolute;
      top: 0;
      left: 412px;
      width: 400px;
      height: 400px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-repeat: no-repeat;
      background-size: 800px 800px;
      background-color: #f8f8f8;
   }

   .middle {
      width: 400px;
      height: 400px;
      background: #f5f5f5;
      position: relative;
      cursor: move;

      .layer {
         width: 200px;
         height: 200px;
         background: rgba(0, 0, 0, .3);
         left: 0;
         top: 0;
         position: absolute;
      }

      .event {
         width: 400px;
         height: 400px;
         position: relative;
         cursor: move;
         position: absolute;
         left: 0;
         top: 0;
      }
   }


   .small {
      width: 80px;

      li {
         width: 68px;
         height: 68px;
         margin-left: 12px;
         margin-bottom: 15px;
         cursor: pointer;
         border: 2px solid #ffffff;
         transition: all .3s linear;

         &:hover, &.active {
            border: 2px solid @xtxColor;
         }
      }
   }
}

.el-skeleton {
   width: 480px;
   height: 400px;
   display: flex;
   justify-content: space-between;
}
</style>
